<template>
  <div class="user-lend-account">
    <div class="date">
      <span>日期</span>
      <el-date-picker
        @change="dateChange"
        v-model="date"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          width="150"
          prop="statisticsTime"
          label="日期">
          <template slot-scope="scope">
            <span>{{tableFormatDate(scope.row.statisticsTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="游戏"
          width="160">
          <template slot-scope="scope">
            <span>{{scope.row.gameName || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="借号单量(创建)"
          prop="orderCount"
          width="160">
        </el-table-column>
        <el-table-column
          width="160"
          label="使用出借人数(创建)"
          prop="useLendUserCount">
        </el-table-column>
        <el-table-column
          label="解锁单量"
          prop="openLockOrder">
        </el-table-column>
        <el-table-column
          label="免费订单量"
          prop="freeOrderCount">
        </el-table-column>
        <el-table-column
          label="付费订单量"
          prop="payOrderCount">
        </el-table-column>
        <el-table-column
          label="解锁订单已支付金额(元)"
          prop="hasApplyOrderTotalPrice">
        </el-table-column>
        <el-table-column
          label="订单金额(元)"
          prop="orderTotalPrice">
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        @size-change="sizeChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
export default {
  data () {
    return {
      loading: false,
      date: '',
      pickerOptions: {
          disabledDate (time) {
              return time.getTime() > Date.now()
          }
      },
      tableData: [],
      pageNum: 1,
      pageSize: 25,
      count: 0
    }
  },
  created () {
    this.setDate()
    this.getUserData()
  },
  methods: {
    setDate () {
      let start = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 14, 'YYYY-MM-DD')
      let end = formatDate(new Date(), 'YYYY-MM-DD')
      this.date = [start, end]
    },
    dateChange (date) {
      this.date = date
      this.getUserData()
    },
    async getUserData () {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.date && this.date.length) {
        params.startTime = this.date[0] + ' 00:00:00'
        params.endTime = this.date[1] + ' 23:59:59'
      }
      this.loading = true
      let res = await this.$http.get('/lend/list', { params })
      console.log(res, '00')
      if (res.code === '0') {
          this.tableData = res.data.list
          this.count = res.data.totalRow
      } else {
          this.$message({
              type: 'error',
              message: '系统异常，请稍后再试'
          })
      }
      this.loading = false
    },
    showList (data) {
        let html = ''
        data.forEach(item => {
            html += `<p>${item.name}：${item.count || '0'}</p>`
        })
        return html
    },
    sizeChange (page) {
      this.pageNum = page
      this.getUserData()
    },
    // 时间转换
    tableFormatDate (time) {
        return formatDate(time, 'YYYY-MM-DD')
    }
  }
}
</script>
<style lang="scss" scoped>
  .date{
    span{
      margin-right: 10px;
      font-size: 14px;
    }
  }
  .table-box{
    margin: 20px 0;
  }
  .page{
    text-align: right;
  }
</style>
